<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100%;
        height: 200px;
        border: 1px solid red;
    }
    .outer1 {
        position: relative;

    }
    .outer1 .inner1 {
        width: 200px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .outer2 {
        position: relative;
    }
    .outer2 .inner2 {
        width: 200px;
        height: 100px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .outer3 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .outer3 .inner3 {
        width: 200px;
        height: 100px;
    }
    .father {
        /*? 父元素设置*/
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        /*? 通过这两个属性设置垂直居中 vertical-align用于行内/行内块元素 或者 table-cell*/
        vertical-align: middle;
        /*? 控制块级元素内文本内容（含块级元素下的行内/行内块的文本内容）*/
        text-align: center;
    }
    .son {
        /*? 子元素设置 行内块才能使text-align生效*/
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #ffcccc;
    }
</style>
<body>
<div class="outer1">
    <div class="inner1"></div>
</div>
<div class="outer2">
    <div class="inner2"></div>
</div>
<div class="outer3">
    <div class="inner3"></div>
</div>
<!--? 方法4 position + margin-->
<!--? 方法5 grid 和flex一模一样 除了display:grid-->
<!--? 方法6 table-->
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>
